<template>
  <el-dialog title="Conversation" :visible="dialogReplyFormVisible" :show-close="false" width="70%" top="5vh">
    <el-form :model="vaildationForm" ref="replyForm" :rules="rules">
      <el-row v-show="functionList.update_request_status">
        <el-col>
          <el-form-item label="From:">
            <el-radio-group v-model=vaildationForm.sender>
              <el-radio label="CHGCNTL">CHGCNTL</el-radio>
              <el-radio :label="formBaseData.requesterDomainId">{{formBaseData.requesterDisplayName}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="To:" prop="receiverSelectionList">
            <el-checkbox-group v-model="vaildationForm.receiverSelectionList">
              <el-checkbox
                v-for="item in toRolesList"
                :label="item.name"
                :key="item.name"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="CC:" prop="ccSelectionList">
            <el-checkbox-group v-model="vaildationForm.ccSelectionList">
              <el-checkbox
                v-for="item in ccRolesList"
                :label="item.name"
                :key="item.name"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="msg">
        <el-col>
          <label><span style="color:red;">*</span>Response Message:</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item prop="description">
            <vue-editor v-model="vaildationForm.description" :editorToolbar="customToolbar"></vue-editor>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <attachment-upload :uploadUrl="uploadUrl"
                             :acceptFileType="acceptFileType" :fileSizeLimit="fileSizeLimit"
                             ref="attachmentUpload"></attachment-upload>

        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSendButton">Send</el-button>
      <el-button @click="onCancelButton">Cancel</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueEditor } from 'vue2-editor'
import attachmentUpload from '@/base-components/attachment-upload/AttachmentUpload.vue'
import requestRemarksService from '@/service/requestRemarks'

export default {
  props: {
    formBaseData: {
      type: Object
    },
    functionList: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      dialogReplyFormVisible: false,
      vaildationForm: {
        sender: 'CHGCNTL',
        description: '',
        receiverSelectionList: [],
        ccSelectionList: []
      },
      requestRemarks: {
        sender: '',
        senderDisplayName: '',
        receiver: '',
        sendToCC: '',
        desc: '',
        refNo: '',
        attachmentsList: []
      },
      toRolesList: [
        {name: 'Requester'},
        {name: 'Endorser'},
        {name: 'Executor'},
        {name: 'First Verifier'},
        {name: 'Second Verifier'},
        {name: 'HKCTR'},
        {name: 'CHGCNTL'},
        {name: 'NotifyPersons'},
        {name: 'Fallback Handler'},
        {name: 'All'}
      ],
      ccRolesList: [
        {name: 'Requester'},
        {name: 'Endorser'},
        {name: 'Executor'},
        {name: 'First Verifier'},
        {name: 'Second Verifier'},
        {name: 'HKCTR'},
        {name: 'CHGCNTL'},
        {name: 'NotifyPersons'},
        {name: 'Fallback Handler'},
        {name: 'All'}
      ],
      content: '',
      customToolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{'align': ''}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],
        [{'color': []}, {'background': []}],
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'header': [false, 1, 2, 3, 4, 5, 6]}, {'font': []}]

      ],
      uploadUrl: '/rest/attachment/upload',
      acceptFileType: 'jpg,gif,png,bmp,doc,txt,pdf,docx,xls,xlsx,zip,msg,rtf,tif,html,htm,rar',
      fileSizeLimit: 10,
      rules: {
        receiverSelectionList: [
          {required: true, message: '[Response To] can not be empty, please select one or more.', trigger: 'change'}
        ],
        description: [
          {required: true, message: '[Response Message] can not be empty, please input.', trigger: 'change'}
        ]
      }

    }
  },
  methods: {
    popWindow() {
      this.dialogReplyFormVisible = true
    },
    onSendButton() {
      this.$refs.replyForm.validate((valid) => {
        if (valid) {
          this.getRequestRemarksObj()
          this.addOneRequestRemarks(this.requestRemarks).then(() => {
            this.$emit('refreshConversationHistory', 'value')
          })
          this.reset()
          this.dialogReplyFormVisible = false
        }
      })
    },
    reset() {
      this.$refs.replyForm.resetFields()
      this.$refs.attachmentUpload.reset()
    },
    onCancelButton() {
      this.reset()
      this.dialogReplyFormVisible = false
    },
    getRequestRemarksObj() {
      if (this.functionList.update_request_status) {
        this.requestRemarks.sender = this.vaildationForm.sender
        this.requestRemarks.senderDisplayName = this.formBaseData.requesterDisplayName
      } else {
        this.requestRemarks.sender = ''
      }
      this.requestRemarks.receiver = this.vaildationForm.receiverSelectionList.join(';').toUpperCase()
      this.requestRemarks.sendToCC = this.vaildationForm.ccSelectionList.join(';').toUpperCase()
      this.requestRemarks.desc = this.vaildationForm.description
      this.requestRemarks.refNo = this.formBaseData.refNO
      this.requestRemarks.attachmentsList = this.$refs.attachmentUpload.getAttachments()
    },
    async addOneRequestRemarks() {
      await requestRemarksService.addOneRequestRemarks(this.requestRemarks)
    }
  },
  components: {
    VueEditor,
    attachmentUpload
  }
}
</script>

<style scoped lang="scss">
  @import './../../../common/css/base.scss';

  .ql-snow .ql-picker.ql-header .ql-picker-item:before, .ql-snow .ql-picker.ql-header .ql-picker-label:before {
    position: relative !important;
    top: -10px !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-item:before, .ql-snow .ql-picker.ql-font .ql-picker-label:before {
    position: relative !important;
    top: -10px !important;
  }

  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label, .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border: 1px solid transparent !important;
  }

  .msg {
    margin-bottom: 10px;
  }

</style>
